<template>
  <el-form
    :model="form"
    ref="fff"
    label-width="100px"
    class="demo-ruleForm"
    :rules="rules"
  >
    <el-form-item label="点位名称" prop="name">
      <el-input
        v-model="form.name"
        style="width: 85%"
        placeholder="请输入点位名称"
        maxlength="10" show-word-limit
      ></el-input>
    </el-form-item>
    <el-form-item label="所在区域" prop="regionId">
      <el-select
        v-model="form.regionId"
        placeholder="请选择区域"
        style="width: 85%"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in regionalMan"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属商圈" prop="businessId">
      <el-select
        v-model="form.businessId"
        placeholder="请选择所属商圈"
        style="width: 85%"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in busine"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="归属合作商" prop="ownerId">
      <el-select
        v-model="form.ownerId"
        placeholder="请选择归属合作商"
        style="width: 85%"
        
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in partner"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="详细地址" prop="areaCode" >
      <el-cascader
        v-model="form.areaCode"
        :options="options"
        @change="handleChange"
        style="width: 85%; margin-bottom: 20px;"
      ></el-cascader>
      <el-input
        type="textarea"
        v-model="form.addr"
        style="width: 85%"
        placeholder="请输入"
        :rows="3"
        maxlength="40" show-word-limit
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="del">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  partners,
  busines,
  regionalManagement,
  addPoint,
  resPoint,
} from '@/api/homePage'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

export default {
  props: {
    row: {
      type: Object,
      required: true,
    },
    xiu: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      form: {
        id: '',
        name: '',
        addr: '',
        businessId: '',
        ownerId: '',
        areaCode: 0,
        createUserId: 1,
        regionId: '',
        ownerName: '',
      },
      rules: {
        name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入备注说明', trigger: 'blur' }],
        businessId: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
        ],
        ownerId: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
        ],
        areaCode: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
        ],
        createUserId: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
        ],
        regionId: [{ required: true, message: '请输入区域', trigger: 'blur' }],
        ownerName: [
          { required: true, message: '请输入备注说明', trigger: 'blur' },
        ],
      },
      partner: [], //合作商列表
      busine: [], //商圈列表
      regionalMan: [], //商圈区域列表
      options:regionData,
      addForm:{}
    }
  },
  async created() {
    this.getdata()
  },
  methods: {
    async submit() {
      if (this.xiu === 1) {
        this.form.areaCode=Number(this.form.areaCode[2])
        await addPoint(this.form)
        this.$message.success('添加成功')
        this.$refs.fff.resetFields()
        this.$emit('submit')
      } else if (this.xiu === 2) {
        this.form.areaCode=Number(this.form.areaCode[2])
        await resPoint(this.form)
        this.$message.success('修改成功')
        this.$refs.fff.resetFields()
        this.$emit('submit')
      }
    },
    // 重置表单
    del() {
      this.$refs.fff.resetFields()
    },
    async getdata() {
      const { data: partner } = await partners({
        pageIndex: 1,
        pageSize: 10000,
      })
      const { data: busine } = await busines()
      const { data: regionalMan } = await regionalManagement({
        pageIndex: 1,
        pageSize: 10000,
      })
      this.partner = partner.currentPageRecords
      this.busine = busine
      this.regionalMan = regionalMan.currentPageRecords
    },
    // 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions
    projectInfo() {
      var that = this
      this.getProjectInfo({ token: this.$store.state.user.token, id: that.id })
        .then((res) => {
          this.addForm = {
            id: res.id,
            // 基础信息
            p_name: res.p_name, //项目名
            p_message: res.p_message, //项目信息
            area: res.area, //地区
            remark: res.remark, //备注
          }
          this.form.areaCode =
          TextToCode[this.addForm.area.split('/')[0]][
              this.addForm.area.split('/')[1]
            ][this.addForm.area.split('/')[2]].code 
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleChange(value) {
      console.log(value)
      this.getCodeToText(null, value)
    },
    getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null
      } else if (null === codeArray) {
        codeArray = codeStr.split(',')
      }
      let area = ''
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]]
          break
        case 2:
          area += CodeToText[codeArray[0]] + '/' + CodeToText[codeArray[1]]
          break
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            '/' +
            CodeToText[codeArray[1]] +
            '/' +
            CodeToText[codeArray[2]]
          break
        default:
          break
      }
      console.log(area)
      this.addForm.area = area
      return area
    },
  },
  watch: {
    row: {
      immediate: true,
      deep: true,
      handler() {
        if (this.xiu === 2) {
            (this.form.name = this.row.name),
            (this.form.id = this.row.id),
            (this.form.addr = this.row.addr),
            (this.form.businessId = this.row.businessId),
            (this.form.ownerId = this.row.ownerId),
            (this.form.areaCode = this.row.areaCode),
            (this.form.createUserId = this.row.createUserId),
            (this.form.regionId = this.row.regionId),
            (this.form.ownerName = this.row.ownerName)
        }else if(this.xiu === 1){
          (this.form.name = ''),
            (this.form.id = ''),
          (this.form.addr = ''),
    (this.form.businessId = ''),
       (this.form.ownerId = ''),
      (this.form.areaCode =''),
  (this.form.createUserId = ''),
      (this.form.regionId = ''),
     (this.form.ownerName = '')
        }
      },
    },
  },
}
</script>

<style lang="scss">
/* //修改地区选择框样式 */
.distpicker-address-wrapper {
  select {
    width: 250px !important;
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
  .el-popup-parent--hidden{
    .el-popup-parent--hidden {
      .el-cascader-panel {
        .el-scrollbar__view .el-cascader-menu__list {
          height: 200px;
        }
      }
  }
  }
}
  .el-popper .el-cascader__dropdown {
    .el-cascader-panel{
        height: 200px;
        // el-cascader-menu__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default
    
  }
  
  
}
</style>
